<%@ Page Language="C#" MasterPageFile="~/Common/WebSiteMaster.master" AutoEventWireup="true" CodeBehind="C_UpdatePanelAnimationExtender.aspx.cs" Inherits="ScottCateAjax2008.Lesson08.C_UpdatePanelAnimationExtender" Title="Update Panel Animation Extender" %>

<%@ Register Src="../UserControls/TimeLabelButton.ascx" TagName="TimeLabelButton"
    TagPrefix="uc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:ScriptManager id="SM1" runat="server" />
    
    <p>
        This example was original brought in from the Control Toolkit UpdatePanelAnimationExtender
        sample. It has since been modified, but original credit goes to the Control Toolkit team,
        or the original UpdatePanelAnimationExtender author.
    </p>

    <div style="background-color: #DEDEDE;">
        <!-- To see the parent element in action, 
             move the UP1 control into this div,
             with a specific background-color set to gray  -->
     
        <asp:UpdatePanel ID="UP1" runat="server">
            <ContentTemplate>
                <uc1:TimeLabelButton ID="TimeLabelButton1" runat="server" DelayLoad="true" SecondsToDelay="3" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
       
    <cc1:UpdatePanelAnimationExtender
        BehaviorID="animation"
        ID="UpdatePanelAnimationExtender1" runat="server"
        TargetControlID="UP1">
            <Animations>
                <OnUpdating>
                    <Sequence>
                        <%-- Store the original height of the panel --%>
                        <ScriptAction Script="var b = $find('animation');
                                //check the background color - if found store it
                                if(b._element.style.backgroundColor!='')
                                    {b._originalBackColor=b._element.style.backgroundColor;}
                                else{
                                    //check the parent for a background color;
                                    //this could be a recursive call up the chain
                                    //we're only going up one level, and calling it quits.
                                    var mask = 'Parent Background Color: {0}';
                                    var bgColor = b._element.parentElement.style.backgroundColor;
                                    Sys.Debug.trace(String.format(mask, bgColor));
                                    if(b._element.parentElement.style.backgroundColor!='')
                                        b._originalBackColor=b._element.parentElement.style.backgroundColor;
                                    else
                                        b._originalBackColor='#FFFFFF';
                                }
                                mask = 'Original Color is: {0}';
                                Sys.Debug.trace(String.format(mask, b._originalBackColor)); " />
                        <ScriptAction Script="var b = $find('animation');
                                b._originalHeight = b._element.offsetHeight;" />
                        
                        <%-- Disable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="UP1" Enabled="false" />
                        </Parallel>
                        
                        <StyleAction Attribute="overflow" Value="hidden" />
                        
                        <%-- Do each of the selected effects --%>
                        <Parallel duration="1" Fps="30">
                            <FadeOut AnimationTarget="UP1" minimumOpacity=".2" />
                            <Resize Height="0" />
                            <Color AnimationTarget="UP1" PropertyKey="backgroundColor"
                                EndValue="#FF0000" StartValue="#40669A" />
                        </Parallel>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <%-- Do each of the selected effects --%>
                        <Parallel duration=".25" Fps="30">
                            <FadeIn AnimationTarget="UP1" minimumOpacity=".2" />
                            <Resize HeightScript="$find('animation')._originalHeight" />
                            <Color AnimationTarget="UP1" PropertyKey="backgroundColor"
                                    EndValueScript="$find('animation')._originalBackColor;"
                                    StartValue="#FF0000" />
                        </Parallel>
                        
                        <%-- Enable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="UP1" Enabled="true" />
                        </Parallel>                            
                    </Sequence>
                </OnUpdated>
            </Animations>
    </cc1:UpdatePanelAnimationExtender>
    
</asp:Content>
